<!--
 * @Author: your name
 * @Date: 2021-12-24 10:33:06
 * @LastEditTime: 2021-12-26 19:50:13
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue\vue-douban-pc\src\views\Books.vue
-->
<template>
    <div class="books">
        <div class="b-block">
            <div class="b-list" v-for="list in booksList" :key="list.book_id">
                <div class="b-kernel">
                    <h4 @click="href(list.book_id)">{{ list.b_title }}</h4>
                    <router-link :to="{name: 'BooksPlay',params: {id: list.book_id}}"><img :src="baseUrl + list.b_image" alt /></router-link>
                    <div class="b-footer">
                    <span class="toupdate-color">{{ list.b_author }}</span>
                    <span class="score-color">评分: {{list.b_score}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mixin from "../utils/mixin";
export default {
    name: 'VueMovies',
    mixins: [mixin],
    data() {
        return {
            booksList: [],
        };
    },

    mounted() {

    },
    created() {
        this.getBooksList();
    },
    methods: {
        getBooksList() {
            this.axios.get("/getBooksList").then((res) => {
                this.booksList = res.data;
                console.log(this.booksList);
            })
        },
        href(id) {
            this.$router.push({ path: "/booksplay", name: "BooksPlay", params: { id: id } })
        }
    },
};
</script>

<style lang="scss" scoped>
.books {
    .b-block {
        width: 85%;
        position: absolute;
        top: 60px;
        left: 12%;

        .b-list {
            display: inline-block;
            .b-kernel {
                margin: 5px;
                padding: 20px;
                background-color: rgb(255, 255, 255);
                border-radius: 5px;
                h4 {
                    font-size: 15px;
                    font-weight: 600;
                    margin-bottom: 10px;
                }
                h4:hover{
                    color: orangered;
                    transition: all 0.3s ease;
                    cursor: pointer;
                }
                img {
                    height: 350px;
                    width: 230px;
                    cursor: pointer;
                }
                .b-footer{
                    display: flex;
                    justify-content: space-between;
                    span {
                        margin-top: 10px;
                        display: inline-block;
                    }
                    .toupdate-color{
                        color: green;
                    }
                    .score-color{
                        color: orangered;
                    }
                }
            }
        }
    }
}
</style>